<html>

<head>
    <title>HTML 文档结构</title>
</head>

<body>
    <div class="group">
        <!-- 输入框 -->
        <!-- 对不同属性的应用 -->
        <input type="text" class="todovalue" name="todovalueName" id="todovalueId" placeholder="请输入todo内容"
            onkeydown="valueChange(event)" />

        <!-- 添加交互代码 -->
        <input type="button" value="BUTTON2" onclick="handleClick()"></input>
        <button type="button" id="button3">BUTTON3</button>

        <!-- 遍历数据\实现删除功能 -->
        <div id="todoList">
          
        </div>
        <!-- 操作的footer -->
        <!-- ctrl+斜杠为注释 -->
    </div>
</body>
<style>
    /* 调整文本框的颜色和状态 */
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .group {
        border: 1px solid salmon;
        padding: 10px;

        border-radius: 20px;
    }

    .item {
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }

    .item:hover {
        background-color: rgb(255, 240, 240);
        /* 放大框比例 */
        transform: scale(1.1);
    }

    .item-sp {
        flex-grow: 1;
    }

    .item-del {
        background-color: salmon;
        border: 0px;
        color: white;
        opacity: 0;
    }

    .item-del:hover {
        opacity: 1;
    }

    .todovalue {
        border: 2px solid rgb(236, 196, 188);
        padding: 6px;
        outline: none;
    }

    .todovalue:focus {
        /* background-color:aliceblue; */
        /* 给外框添加阴影 */
        box-shadow: 0px 0px 5px rgb(255, 211, 202);
        border: 2px solid rgb(236, 196, 188);
        outline: none;
    }
</style>

<script lang="javascript">
    var index=0
     // 按钮3的被调用方式
    // 在控制台也可以调用相关代码
    function init() {
        document.getElementById("button3").onclick = handleClick;
        // document.getElementById("input").keydown(function (event) {
        //     if (event.keyCode == 13) 
        //     {
        //         var v = document.getElementById("todovalueId").value;
        //         console.log(v);
        //     }
        // });
        // document.getElementById("input").onkeydown=valueChange(e);
    }

    var index=0
    function handleClick() {
        // 读入文本框信息
        var temp = document.getElementsByName("todovalueName")[0].value;
        // var t = document.getElementById("todoList").innerHTML;

        //比较安全的读入方法
        var div = document.createElement("div");
        // div.innerText = temp;
        
        
        var t = "<div class='item' id='item"+index+ "'>"
            + "  <input class='item-chk' type='checkbox' />"
            + "  <div  class='item-sp'>" + temp + "</div>"
            + "  <input id='item-del-"+index+"' class='item-del' type='button' value='删除' onclick='handleDelClick("+index+")'></input>"
            + " </div>"
        index++;
                
        document.getElementById("todoList").innerHTML+=t;
    }

    function valueChange(e) {
        console.log(e);
        if (event.keyCode == 13) {
            handleClick();
        }
    }

    function test1(index) {
        // console.log("111");
        // document.getElementById("todoList").children[index].style="background-color:aliceblue";
        // document.getElementById("item-del-"+index).style="opacity:1;";
    }

    function test2(index) {
        // console.log("222");
        // document.getElementById("todoList").children[index].style="";
        // document.getElementById("item-del-"+index).style="opacity:0;";
    }

    function handleDelClick(index) {
        var arr = document.getElementById("todoList");
        console.log(arr);
        document.getElementById("item" + index).remove();
    }
    init();
    //alert("test")
</script>

</html>